<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Item Result</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        select, input[type="text"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }
        .result pre {
            margin: 0;
        }
    </style>

    <!-- 引入 Select2 的 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />

    <!-- 引入 jQuery（Select2 依赖 jQuery） -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- 引入 Select2 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
</head>
<body>
<div class="container">
    <h1>Get Item Result</h1>
    <div class="form-group">
        <label for="itemName">Item Name:</label>
        <select id="itemName" name="param1">
            <option value="">Select Item</option>
        </select>
    </div>
    <div class="form-group">
        <label for="quantity">Quantity:</label>
        <input type="text" id="quantity" name="param2">
    </div>
    <button onclick="fetchResult()">Get Result</button>
    <div class="result" id="result"></div>
</div>

<script>
    // Function to fetch the item list and populate the dropdown
    function fetchItems() {
        fetch('/base/item')
            .then(response => response.json())
            .then(data => {
                const select = document.getElementById('itemName');
                // Assuming 'data' is a list of strings
                data.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item;  // Item name as value
                    option.textContent = item;  // Item name as display text
                    select.appendChild(option);
                });

                // Initialize Select2 on the select element
                $('#itemName').select2({
                    placeholder: 'Search for an item',
                    allowClear: true
                });
            })
            .catch(error => {
                console.error('Error fetching items:', error);
            });
    }

    // Function to fetch result based on selected item and quantity
    function fetchResult() {
        const itemName = document.getElementById('itemName').value;
        const quantity = document.getElementById('quantity').value;

        if (!itemName || !quantity) {
            alert('Please select an item and enter a quantity.');
            return;
        }

        fetch(`/base/getResult?itemName=${encodeURIComponent(itemName)}&quantity=${encodeURIComponent(quantity)}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            })
            .catch(error => {
                document.getElementById('result').innerHTML = '<pre>Error: ' + error + '</pre>';
            });
    }

    // Fetch items when the page loads
    window.onload = fetchItems;
</script>
</body>
</html>
